<template>
	<view class="conent">
		<!-- <u-navbar :is-back="false" :safeAreaInsetTop="false" height="180rpx">
		</u-navbar> -->
		<view class="conent_box">
			<u--text text="订购成功！" align="left" size="24" lineHeight="52" bold color="#01040D"></u--text>
			<u--text text="您的订单成功。请在订单中查看订单流程。" align="left" size="14" lineHeight="22" color="#8991A4"></u--text>
			<view class="orderInfor">
				<view class="code">
					<u--text :text="'订单代码:'+orderInfor.orderId" align="center" size="18" bold lineHeight="68"></u--text>
				</view>
				<u-row>
					<u-col span="3">
						<u--text text="收件人" align="left" lineHeight="40" size="14" bold color="#01040D"></u--text>
					</u-col>
					<u-col span="9">
						<u--text :text="orderInfor.address.name" align="right" size="14" bold color="#01040D"></u--text>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<u--text text="手机号码" align="left" lineHeight="40" size="14" bold color="#01040D"></u--text>
					</u-col>
					<u-col span="9">
						<u--text :text="orderInfor.address.phoneNumber" align="right" size="14" bold
							color="#01040D"></u--text>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="3">
						<u--text text="地址" align="left" lineHeight="40" size="14" bold color="#01040D"></u--text>
					</u-col>
					<u-col span="9">
						<u--text :text="orderInfor.address.address+orderInfor.address.detailAddress" align="right"
							size="14" bold color="#01040D" customStyle="text-align:right;"></u--text>
					</u-col>
				</u-row>
				<u-divider dashed lineColor="#01040D"></u-divider>
				<u-row>
					<u-col span="3">
						<u--text text="订单总计" align="left" lineHeight="40" size="14" bold color="#01040D"></u--text>
					</u-col>
					<u-col span="9">
						<u--text :text="orderInfor.priceAll/100" mode="price" align="right" size="14" bold
							color="#01040D"></u--text>
					</u-col>
				</u-row>
			</view>
			<u-button text="跟踪订单" color="#07BFA5" customStyle="width:50%;margin-top:40rpx;" @click="trace"></u-button>
			<u-button text="返回首页" color="#07BFA5" :plain="true" customStyle="width:50%;margin-top:40rpx;"
				@click="back"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import router from '@/api/router';
	const orderInfor = ref({})
	onLoad((options) => {
		orderInfor.value = JSON.parse(options.payForm)
		console.log("123--", orderInfor.value)
	})
	const trace = () => {
		console.log("跟踪订单");
		router.reLaunch({
			url: '/pageB/order/orderDetails?orderId=' + orderInfor.orderId
		})
	}
	const back = () => {
		console.log("返回首页");
		router.reLaunch({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	body {
		background: #f8f8f8;
	}

	.conent {
		padding: 0 40rpx;

		.conent_box {
			margin: 0;

			.orderInfor {
				margin-top: 120rpx;
				padding: 70rpx 40rpx;
				position: relative;
				border-radius: 20rpx;
				box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
				background: #fff;

				.code {
					width: 90%;
					position: absolute;
					left: 5%;
					top: -60rpx;
					border-radius: 20rpx;
					background: #CDFFF8;
				}
			}
		}
	}
</style>